/**
 * Created by ren on 12/04/2017.
 */
import React, {Component} from 'react';
import {
  StyleSheet,
  Platform,
  Image,
  Dimensions,
  StatusBar,
  TouchableWithoutFeedback,
  View
}from 'react-native';
import {
  Container,
  Text,
  Input,
  Left,
  Icon,
  Body,
  Right,
  Button,
  Header,
  Title,
} from 'native-base'
import {getSize} from '../utils/response'
import PageUtil from '../utils/PageUtil'
import * as api from '../utils/api'
import * as Netservice from '../utils/netservice'
import ResetPwd from './ResetPwd'
export default class FindPwd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      verBtn: '获取验证码',
      btnStatus: false,
      mobile: '',
      num: ''
    }
    this.PageUtil = new PageUtil();
  }

  getCheckNum() {
    if (!this.state.mobile) {
      Netservice.toast('手机号不能为空！')
      return
    }
    let num = 60, timer1
    this.setState({
      btnStatus: true
    })
    Netservice.get(api.getCheckNum, {
      phoneNum: this.state.mobile,
      opType: 1
    }).then(() => {
      timer1 = setInterval(() => {
        this.setState({
          verBtn: '已发送(' + num + 's)'
        })
        if (num === 0) {
          clearInterval(timer1)
          this.setState({
            verBtn: '重新发送',
            btnStatus: false
          })
          return
        }
        num--
      }, 1000)
    })
  }

  resetPwd() {
    if (!this.state.mobile) {
      Netservice.toast('手机号不能为空！')
      return
    }
    if (!this.state.num) {
      Netservice.toast('验证码不能为空！')
      return
    }
    Netservice.post(api.CheckNumMatching, {
      checkNum: this.state.num
    }).then(() => {
      this.PageUtil.jumpPageWithComponent(ResetPwd, {
        phone: this.state.mobile
      })
    })
  }

  _onMobileChange(value) {
    if (/^[0-9]*$/.test(value)) {
      this.setState({
        mobile: value
      })
    }
  }

  _onNumChange(value) {
    this.setState({
      num: value
    })
  }

  render() {
    return (
      <Container style={{backgroundColor:'#F4F4F4'}}>
        <Header iosBarStyle="dark-content" backgroundColor="#F7F7F7"
                style={{backgroundColor:'#F7F7F7',borderBottomWidth:1,borderBottomColor:'#B2B2B2'}}>
          <StatusBar
            backgroundColor={'#303135'}
          />
          <Left style={{flex:1}}>
            <Button transparent onPress={this.PageUtil.pop}>
              <Icon name='arrow-back' style={{fontSize:getSize(24),color:'#333333'}}/>
            </Button>
          </Left>
          <Body style={{alignItems:'center'}}>
          <Title style={{color:'#333333',fontSize:getSize(19)}}>找回密码</Title>
          </Body>
          <Right style={{flex:1}}/>
        </Header>
        <View>
          <View style={{marginTop: getSize(24),flexDirection:'row'}}>
            <Input placeholder='请输入手机号' style={styles.input1} keyboardType="number-pad" value={this.state.mobile}
                   onChangeText={(mobile) => this._onMobileChange(mobile)}/>
          </View>
          <View style={{flexDirection:'row', marginTop: getSize(24),marginRight: getSize(18),alignItems:'center'}}>
            <Input placeholder='请输入验证码'
                   value={this.state.num}
                   onChangeText={(num) => this._onNumChange(num)}
                   style={styles.input}/>
            <Button success
                    style={{backgroundColor:this.state.btnStatus?'#B8BDBD':'#16BD42',height:getSize(50),borderRadius: getSize(8)}}
                    disabled={this.state.btnStatus}
                    onPress={()=>this.getCheckNum()}>
              <Text>{this.state.verBtn}</Text>
            </Button>
          </View>
          <Button
            block
            onPress={()=>this.resetPwd()}
            style={{marginLeft:getSize(15),marginRight:getSize(15),borderRadius: getSize(20),backgroundColor:'#16BD42',marginTop:getSize(42)}}
          >
            <Text style={{color:'white',fontSize:getSize(15)}}>验证</Text>
          </Button>
        </View>
      </Container>
    )
  }
}
const styles = {
  input1: {
    paddingLeft: getSize(10),
    marginLeft: getSize(18),
    marginRight: getSize(18),
    borderWidth: 1,
    borderColor: '#C9C9C9',
    borderRadius: getSize(8),
    backgroundColor: 'white',
  },
  input: {
    paddingLeft: getSize(10),
    marginLeft: getSize(18),
    marginRight: getSize(18),
    borderWidth: 1,
    borderColor: '#C9C9C9',
    borderRadius: getSize(8),
    backgroundColor: 'white'
  }
}
